<template>
  <div class="main_box">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button
          plain
          size="small"
          type="success"
          icon="fa fa-mail-forward"
          @click="returnList"
        >
          返 回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item label="项目名称" prop="itemName">
            <el-input v-model="dataForm.itemName"></el-input>
          </el-form-item>

          <InstitutionSelect
            @institutionId="getInstitutionId"
            :id="dataForm.institutionId"
          ></InstitutionSelect>

          <el-form-item label="采样类型" prop="sampleType">
            <el-select
              v-model="dataForm.sampleType"
              placeholder="请选择采样类型"
            >
              <el-option
                v-for="item in sampleTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="采样种类" prop="sampleCategory">
            <el-select
              v-model="dataForm.sampleCategory"
              placeholder="请选择采样种类"
            >
              <el-option
                v-for="item in sampleCategoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="采样时间" prop="applyTime">
            <el-input v-model="dataForm.applyTime"></el-input>
          </el-form-item>
          <el-form-item label="采样状态" prop="applyState">
            <el-select
              v-model="dataForm.applyState"
              :clearable="true"
              placeholder="请选择采样状态"
            >
              <el-option
                v-for="item in applyStateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑码员" prop="collectIds">
            <el-select
              v-model="dataForm.collectIds"
              filterable
              clearable
              multiple
              placeholder="请选择绑码员"
            >
              <el-option
                v-for="item in collectUserList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

           <el-form-item label="采样员" prop="sampleUserIds">
            <el-select
              v-model="dataForm.sampleUserIds"
              filterable
              clearable
              multiple
              placeholder="请选择采样员"
            >
              <el-option
                v-for="item in sampleUserList"
                :key="item.userId"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>



          <el-form-item label="收样员" prop="syUserIdList">
            <el-select
              v-model="dataForm.syUserIdList"
              filterable
              clearable
              multiple
              placeholder="请选择收样员"
            >
              <el-option
                v-for="item in syUserList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="排队人数" prop="queueNum">
          <el-input type="number" v-model="dataForm.queueNum"></el-input>
        </el-form-item> -->
          <el-form-item label="人员数量" prop="userNum">
            <el-input type="number" v-model="dataForm.userNum"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="dataForm.price"></el-input>
          </el-form-item>
          <el-form-item label="过期天数" prop="expirationDays">
            <el-input placeholder="请输入过期天数" type="number" v-model="dataForm.expirationDays" style="width:80%">
              <!-- <el-button slot="append" @click="dataForm.expirationDays = 10000">长期</el-button> -->
            </el-input>
            <el-checkbox v-model="longDay" @change="handleLongChange">
                长期
              </el-checkbox>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
           <el-form-item label="手机号是否必填">
            <el-radio v-model="dataForm.mustPhone" label="1">否</el-radio>
            <el-radio v-model="dataForm.mustPhone" label="2">是</el-radio>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="联系人姓名" prop="linkMan">
            <el-input v-model="dataForm.linkMan"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="linkPhone">
            <el-input v-model="dataForm.linkPhone"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="dataForm.address"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="submitClick"
              >保 存</el-button
            >
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import Region from "@/components/Region";
import SampleApplyApi from "@/api/sample/sampleApply";
import InstitutionSelect from "@/components/InstitutionSelect";
import AuthApi from "@/api/system/auth";

export default {
  data() {
    return {
      longDay:false,
      dataForm: {
        applyId: "",
        itemName: "",
        institutionId: "",
        sampleUserIds:[],
        collectIds: [],
        expirationDays:null,
        syUserIdList: [],
        address: "",
        applyTime: "",
        // queueNum:"",

        userNum: "",//人员数量
        price:"",//单价
        mustPhone: "1",
        remark: "",
        linkMan: "",
        linkPhone: "",
        sampleType: "",
        sampleCategory: "",
        applyState: ""
      },
      loadingIns: false,
      tradeArea: [],
      pickHospitalList: [],
      props: {
        value: "areaId",
        label: "areaName"
      },
      syUserList: [],
      collectUserList: [],
      sampleUserList:[],
      sampleTypeList: [
        { label: "单采", value: 1 },
        { label: "5混采", value: 5 },
        { label: "10混采", value: 10 },
        { label: "20混采", value: 20 }
      ],
      sampleCategoryList: [
        { label: "人", value: 1 },
        { label: "环境", value: 2 }
      ],
      //采样状态：(1.申请中 2.已安排上门 3.已取消 4.已完成)
      applyStateList: [
        { label: "申请中", value: 1 },
        { label: "已安排上门", value: 2 },
        { label: "已取消", value: 3 },
        { label: "已完成", value: 4 }
      ],
      roleRules: {
        /*userNum: [
            { required: true, message: "请输入人员数量", trigger: "blur" },
          ],*/
        itemName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { max: 50, message: "长度不超过50个字", trigger: "blur" }
        ],
        applyTime: [
          { required: true, message: "请输入采样时间", trigger: "blur" },
          { max: 50, message: "长度不超过50个字", trigger: "blur" }
        ],
        expirationDays:[
            { pattern: /^\d{0,6}$/g, message: "不能超过六位数", trigger: "blur" }
        ],
        institutionId: [
          { required: true, message: "请选择医检机构", trigger: "change" }
        ],
        sampleType: [
          { required: true, message: "请选择采样类型", trigger: "change" }
        ],
        sampleCategory: [
          { required: true, message: "请选择采样种类", trigger: "change" }
        ],
        areaIds: [
          { required: true, message: "请选择所在区", trigger: "change" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        linkMan: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { max: 15, message: "长度不超过15个字", trigger: "blur" }
        ],
        linkPhone: [
          { validator: this.$Utils.elIsPhone, trigger: "blur", required: true }
        ]
      }
    };
  },
  components: {
    Region,
    InstitutionSelect
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.getData();
      }
    },
    getData() {
      this.getCollectUserList();
      this.getSampleUserList();
      this.getSyUserList();

      SampleApplyApi.getSampleApplyInfo({
        sampleApplyId: this.$route.query.id
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data);
        //debugger
        //this.dataForm.areaIds = [this.dataForm.provinceId,this.dataForm.cityId,this.dataForm.areaId];
        if (res.data.collectIds) {
          this.dataForm.collectIds = res.data.collectIds;
        }
        if(res.data.sampleUserIds){
          let arr = []
          res.data.sampleUserIds.split(",").forEach(item=>arr.push(Number(item)))
          this.dataForm.sampleUserIds = arr;
        }
        if (res.data.syUserIds) {
          res.data.syUserIds
            .toString()
            .split(",")
            .forEach(item => {
              this.dataForm.syUserIdList.push(parseInt(item));
            });
        }
        if (res.data.sampleType) {
          this.dataForm.sampleType = parseInt(res.data.sampleType);
        }
        if (res.data.sampleCategory) {
          this.dataForm.sampleCategory = parseInt(res.data.sampleCategory);
        }
        if (res.data.applyState) {
          this.dataForm.applyState = parseInt(res.data.applyState);
        }
        // if (res.data.queueNum){
        //   this.dataForm.queueNum = parseInt(res.data.queueNum);
        // }
        if (res.data.mustPhone) {
          this.dataForm.mustPhone = String(res.data.mustPhone);
        }
        if (res.data.userNum) {
          this.dataForm.userNum = parseInt(res.data.userNum);
        }
        if(res.data.itemPrice){
          let value = res.data.itemPrice/this.dataForm.userNum
          this.dataForm.price = value.toFixed(2)
        }
        this.dataForm.institutionId = this.dataForm.institutionId + "";
      });
    },
    getCollectUserList() {
      AuthApi.listAllAdmin({}).then(res => {
        this.collectUserList = res.data;
      });
    },
    getSampleUserList() {
      SampleApplyApi.getSampleUserLsit().then(res => {
        this.sampleUserList = res.data;
      });
    },
    getSyUserList() {
      AuthApi.listAdminByRole({ roleId: 4 }).then(res => {
        this.syUserList = res.data;
      });
    },
    getInstitutionId(val) {
      this.dataForm.institutionId = val;
    },
    // 点击获取天数
    handleLongChange(res){
      if(res){
        this.dataForm.expirationDays = 10000
      }else{
        this.dataForm.expirationDays = ""
      }
    },
    submitClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.applyId) {
              this.editApply();
            } else {
              this.addApply();
            }
          });
        }
      });
    },
    addApply() {
      let cond = {
        itemName: this.dataForm.itemName,
        institutionId: this.dataForm.institutionId,
        address: this.dataForm.address,
        applyTime: this.dataForm.applyTime,
        // queueNum: this.dataForm.queueNum,
        // userNum: this.dataForm.userNum,  // 新增时 不统计人数上限
        remark: this.dataForm.remark,
        linkMan: this.dataForm.linkMan,
        linkPhone: this.dataForm.linkPhone,
        sampleType: this.dataForm.sampleType,
        sampleCategory: this.dataForm.sampleCategory,
        applyState: this.dataForm.applyState,
        mustPhone: this.dataForm.mustPhone
      };
      SampleApplyApi.addSampleApply(cond).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editApply() {
      let cond = {
        applyId: this.$route.query.id,
        itemName: this.dataForm.itemName,
        institutionId: this.dataForm.institutionId,
        address: this.dataForm.address,
        applyTime: this.dataForm.applyTime,
        collectIds: this.dataForm.collectIds,
        //sampleUserIds:this.dataForm.sampleUserIds.join(","),
        expirationDays:this.dataForm.expirationDays,
        //syUserIds: this.dataForm.syUserIds,
        remark: this.dataForm.remark,
        // queueNum: this.dataForm.queueNum,
        userNum: this.dataForm.userNum,
        linkMan: this.dataForm.linkMan,
        linkPhone: this.dataForm.linkPhone,
        sampleType: this.dataForm.sampleType,
        sampleCategory: this.dataForm.sampleCategory,
        mustPhone: this.dataForm.mustPhone,
        applyState: this.dataForm.applyState
      };
      cond.syUserIds = this.dataForm.syUserIdList.toString();
      cond.sampleUserIds = this.dataForm.sampleUserIds.toString();

      let totalPrice = this.dataForm.price*this.dataForm.userNum //获取总价
      cond.itemPrice = parseFloat(totalPrice.toFixed(2))
      SampleApplyApi.editSampleApply(cond).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    handleItemChange(val) {
      this.dataForm.provinceId = val.provinceId;
      this.dataForm.provinceName = val.provinceName;
      this.dataForm.cityId = val.cityId;
      this.dataForm.cityName = val.cityName;
      this.dataForm.areaId = val.areaId;
      this.dataForm.areaName = val.areaName;
      this.dataForm.areaIds = [val.provinceId, val.cityId, val.areaId];
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push("/sample/sampleApplyManagement");
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
<style scoped>
.add_wrap {
  padding-top: 10px;
  padding-left: 23px;
}
.main_box {
  padding: 10px;
}
</style>
